<template>
  <div>
    <div>
      <button @click="toMusic">music</button>
      <button @click="toNews">news</button>
    </div>
    <transition name="route">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    toMusic() {
      this.$router.push("/music");
    },
    toNews() {
      this.$router.push("/news");
    },
  },
};
</script>

<style>
.route-enter,
.route-leave-to {
  opacity: 0;
  transform: translateY(-200px);
}

.route-leave-active,
.route-enter-active {
  transition: all 0.5s linear;
}

.route-leave-active {
  position: absolute;
}

.route-move {
  transition: all 0.5s linear;
}
</style>